<template>
	<view class="detail">
		<scroll-view scroll-y="true" :style="{height: getH() + 'px'}">
			<view class="bans">
				<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" circular="true">
				   <swiper-item>
					   <img src="../../static/imgs/ban1.png" alt="" style="width: 100%;">
				   </swiper-item>
				   <swiper-item>
					   <img src="../../static/imgs/ban2.png" alt="" style="width: 100%;">
				   </swiper-item>
				   <swiper-item>
					   <img src="../../static/imgs/ban3.png" alt="" style="width: 100%;">
				   </swiper-item>
				</swiper>
			</view>
			<view class="details">
				<view class="intro">
					<view class="prices">
						<text class="money">￥{{detail.priceNext}}</text>
						<text class="city">成都市</text>
					</view>
					<view class="title">
						<h3>{{detail.name}}</h3><text style="color:#999;">库存：{{detail.number}}</text>
					</view>
					<view class="title">
						<text>{{detail.introduce}}</text>
					</view>
					<view class="safeguard">
						<view class="top1">
							<text style="color: #000000;">平台保障</text>
							<text>✔安全疫苗</text>
						</view>
						<view class="use">
							<text>使用流程</text>
							<uni-steps class="steps" :options="options" :active="0" activeColor="#007AFF"></uni-steps>
						</view>
						<view class="notice">
							<text>注意事项：</text>
							<text>{{detail.notice}}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="btns">
			<view class="add" @click="addCars()">
				<text>加入收藏</text>
			</view>
			<view class="buy" @click="toBuy()">
				<text>立即购买</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				options:[
					{title: '付款'}, {title: '选择接种点'}, {title: '完成接种'}
				],
				detail:{
					 id:'Ab2378',
					 name:'九价hpv疫苗',
					 type:'2',//老人疫苗
					 introduce:'九价HPV疫苗，是用于预防人乳头瘤病毒（HPV）感染引起的宫颈癌，可以预防90%以上的宫颈癌',
					 priceNext:'1099',//定价
					 notice:'接种前两小时不能进食',
					 number:'300'//库存
			 }
			}
		},
		methods: {
			getH(){
				var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
				return (h-44-66)
			},
			// 添加到购物车
			addCars(){
				uni.showToast({
					icon:'success',
					title:"添加成功"
				})
			},
			//立即购买
			toBuy(){
				uni.navigateTo({
					url:"../toBuy/toBuy"
				})
			}
		},
		onLoad({id}) {
			this.id=id
			console.log(this.id)
			this.getH()
		}
	}
</script>

<style scoped lang="less">
	.detail{
		width: 100%;
		display: flex;
		flex-direction: column;
		.bans{
			width: 100%;
			.swiper{
				height: 245px;
			}
		}
		.details{
			width: 100%;
			.intro{
				width: 100%;
				display: flex;
				flex-direction: column;
				.prices{
					display: flex;
					justify-content: space-between;
					
					font-size: 24px;
					align-items: center;
					.money{
						padding: 10px 30px;
						color: #ff0000;
					}
					.city{
						padding: 10px 30px;
						font-size: 36px;
						color: #FFFFFF;
						background-color: #ff0000;
					}
				}
				.title{
					padding: 0 20px;
					margin: 10px 0;
					display: flex;
					justify-content: space-between;
				}
				.safeguard{
					padding: 0 20px;
					.top1{
						display: flex;
						justify-content: space-between;
						color: #aaa;
						margin: 10px 0;
						padding-bottom: 10px;
						border-bottom: 1px solid #aaa;
					}
					.use{
						margin: 10px 0;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.steps{
							width: 80%;
						}
					}
					.notice{
						display: flex;
						flex-direction: column;
						text{
							margin: 10px 0;
						}
					}
				}
			}
		}
		.btns{
			width: 100%;
			position: fixed;
			bottom: 0;
			height: 66px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.add,.buy{
				padding: 10px 30px;
				border-radius: 10px;
				color: #FFFFFF;
				background-color: rgb(217,72,62);
			}
		}
		
	}
</style>
